<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    /*
      FetchAPI调用服务端接口
    */

    // GET参数传递-传统URL
/*    fetch('http://localhost:8082/books?id=100', {
      method: 'get'
    })                        //第一个data参数接受的是 fetch函数的网络请求返回的Promise对象
      .then(function(data){   //.then() 方法是Promise用于指定一个异步操作成功时（即 Promise 被解析或 fulfilled）
                              // 或失败时（即 Promise 被拒绝或 rejected）应该执行的回调函数。
        return data.text();   //Response 对象提供了多种方法来读取响应体，其中 text() 是最基础的方法之一。
                              // 它返回一个 Promise，这个 Promise 在解析时会提供响应体的文本内容。
      }).then(function(data){   //第一个 .then() 调用了 data.text()，它返回了一个 Promise，该 Promise 在响应体的文本内容准备好时解析为文本内容。
                                // 因此，第二个 .then() 的回调函数接收的参数将是这个文本内容。
        console.log(data)
      });*/

    // GET参数传递-restful形式的URL
/*    fetch('http://localhost:8082/books/100', {
      method: 'get'
    })
      .then(function(data){
        return data.text();
      }).then(function(data){
        console.log(data)
      });*/

    // DELETE请求方式参数传递
    // fetch('http://localhost:8082/books/100', {
    //   method: 'delete'
    // })
    //   .then(function(data){
    //     return data.text();
    //   }).then(function(data){
    //     console.log(data)
    //   });
    //
    //  POST请求传参
    // fetch('http://localhost:8082/books', {
    //   method: 'post',
    //   body: 'uname=zhangsan&pwd=100',
    //   headers: {
    //     'Content-Type': 'application/x-www-form-urlencoded'
    //   }
    // })
    //   .then(function(data){
    //     return data.text();
    //   }).then(function(data){
    //     console.log(data)
    //   });

    // POST请求：传递json格式的参数
    // fetch('http://localhost:8082/books', {
    //   method: 'post',
    //   body: JSON.stringify({
    //     uname: '张三',
    //     pwd: '111222'
    //   }),
    //   headers: {
    //     'Content-Type': 'application/json'
    //   }
    // })
    //   .then(function(data){
    //     return data.text();
    //   }).then(function(data){
    //     console.log(data)
    //   });

    // PUT（修改数据）请求传参：
    fetch('http://localhost:8082/books/111', {
      method: 'put',
      body: JSON.stringify({
        uname: 'zhangsan',
        pwd: '123456'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(function(data){
        return data.text();
      }).then(function(data){
        console.log(data)
      });
  </script>
</body>
</html>